
<template>
    <div class="min-h-screen bg-slate-50">
        <!-- 左侧导航 -->
        <div class="fixed left-0 top-0 h-full w-64 bg-white border-r border-slate-200 shadow-sm">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center">
                    <img src="https://ai-public.mastergo.com/ai/img_res/ad2371d26aca26a1b6379d3f18181e0c.jpg" alt="Logo" class="w-10 h-10 mr-3" />
                    <h1 class="text-xl font-semibold text-slate-800">学生成绩管理系统</h1>
                </div>
            </div>
            <nav class="p-2">
                <div v-for="(item, index) in menuItems" :key="index" class="mb-2">
                    <div>
                        <button class="w-full text-left p-3 rounded-lg hover:bg-indigo-50 flex items-center justify-between text-slate-700 transition-colors duration-200">
                            <div class="flex items-center">
                                <i :class="item.icon" class="mr-3"></i>
                                {{ item.name }}
                            </div>
                            <i v-if="item.children" class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div v-if="item.children" class="ml-6 mt-1">
                            <button
                                    v-for="child in item.children"
                                    :key="child.name"
                                    class="w-full text-left p-2 rounded-lg hover:bg-indigo-50 flex items-center text-slate-600 text-sm transition-colors duration-200">
                                <i :class="child.icon" class="mr-3 text-xs"></i>
                                {{ child.name }}
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <!-- 主内容区 -->
        <div class="ml-64 p-10">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-2xl font-bold text-slate-800">数据概览</h2>
                <button class="bg-indigo-600 text-white px-5 py-2.5 rounded-lg flex items-center hover:bg-indigo-700 transition-all duration-200 shadow-sm hover:shadow !rounded-button whitespace-nowrap">
                    <i class="fas fa-upload mr-2"></i>
                    导入学生成绩
                </button>
            </div>
            <!-- 数据概览卡片 -->
            <div class="grid grid-cols-4 gap-6 mb-10">
                <div v-for="(card, index) in statusCards"
                     :key="index"
                     class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
                    <div class="flex items-center">
                        <div :class="`w-12 h-12 rounded-lg flex items-center justify-center ${card.bgColor}`">
                            <i :class="`${card.icon} text-xl ${card.iconColor}`"></i>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm text-gray-600">{{ card.title }}</div>
                            <div class="text-2xl font-semibold mt-1">{{ card.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 图表区域 -->
            <div class="grid grid-cols-2 gap-8">
                <!-- 折线图 -->
                <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
                    <h3 class="text-lg font-semibold mb-6 text-slate-800">数据趋势分析</h3>
                    <div ref="lineChart" class="w-full h-80"></div>
                </div>
                <!-- 饼图 -->
                <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
                    <h3 class="text-lg font-semibold mb-6 text-slate-800">数据分布占比</h3>
                    <div ref="pieChart" class="w-full h-80"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue';
    import * as echarts from 'echarts';
    const lineChart = ref<HTMLElement | null>(null);
    const pieChart = ref<HTMLElement | null>(null);
    const menuItems = [
        { name: '工作台', icon: 'fas fa-desktop' },
        {
            name: '审核管理',
            icon: 'fas fa-tasks',
            children: [
                { name: '项目审核', icon: 'fas fa-project-diagram' },
                { name: '比赛审核', icon: 'fas fa-trophy' },
                { name: '实习审核', icon: 'fas fa-briefcase' }
            ]
        },
        { name: '特殊学生管理', icon: 'fas fa-user-graduate' },
        { name: '毕业去向统计', icon: 'fas fa-chart-bar' }
    ];
    const statusCards = [
        {
            title: '申核总量',
            value: '9',
            icon: 'fas fa-search',
            bgColor: 'bg-yellow-50',
            iconColor: 'text-yellow-500'
        },
        {
            title: '已申核量',
            value: '9',
            icon: 'fas fa-check-circle',
            bgColor: 'bg-green-50',
            iconColor: 'text-green-500'
        },
        {
            title: '未通过量',
            value: '1',
            icon: 'fas fa-times-circle',
            bgColor: 'bg-blue-50',
            iconColor: 'text-blue-500'
        },
        {
            title: '待申核量',
            value: '1',
            icon: 'fas fa-clock',
            bgColor: 'bg-red-50',
            iconColor: 'text-red-500'
        }
    ];
    onMounted(() => {
        if (lineChart.value && pieChart.value) {
            const lineChartInstance = echarts.init(lineChart.value);
            const pieChartInstance = echarts.init(pieChart.value);
// 折线图配置
            const lineOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['申核量', '处理量'],
                    top: 10,
                    right: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#E5E7EB'
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '申核量',
                        type: 'line',
                        data: [1, 2, 5],
                        smooth: true,
                        lineStyle: {
                            color: '#6366F1'
                        },
                        itemStyle: {
                            color: '#6366F1'
                        }
                    },
                    {
                        name: '处理量',
                        type: 'line',
                        data: [2, 1, 3],
                        smooth: true,
                        lineStyle: {
                            color: '#48BB78'
                        },
                        itemStyle: {
                            color: '#48BB78'
                        }
                    }
                ]
            };
// 饼图配置
            const pieOption = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: '#E2E8F0',
                    textStyle: {
                        color: '#1E293B'
                    },
                    borderWidth: 1
                },
                legend: {
                    orient: 'vertical',
                    right: '10%',
                    top: 'center'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '50%'],
                        data: [
                            { value: 9, name: '已申核', itemStyle: { color: '#6366F1' } },
                            { value: 1, name: '待审核', itemStyle: { color: '#22C55E' } },
                            { value: 1, name: '未通过', itemStyle: { color: '#EF4444' } }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            lineChartInstance.setOption(lineOption);
            pieChartInstance.setOption(pieOption);
            window.addEventListener('resize', () => {
                lineChartInstance.resize();
                pieChartInstance.resize();
            });
        }
    });
    //审核首页
</script>
<style scoped>
    .chart-container {
        width: 100%;
        height: 100%;
    }
</style>
